<template>
    <div class="warranty-left">
        <el-input v-model="orderId" @blur="onOrderId" placeholder="请输入OrderId / 邮箱" prefix-icon="el-icon-search" size="small"></el-input>
        <el-radio-group v-model="paneName" size="medium" @change="paneNameStatus">
            <template v-for="item in selectClaim"> 
                {{item.value}}
                <el-badge :value="etxra" class="item" :hidden="paneName !== item.value">
                    <el-radio-button :label="item.value" :key="item.key">
                        {{item.label}}
                        <span class="caret-wrapper" @click="clickCaret(item.value)">
                            <i
                                class="el-icon-caret-top"
                                v-if="sort === 'asc' && item.value === paneName"
                            ></i>
                            <i
                                class="el-icon-caret-bottom"
                                v-if="sort === 'desc' && item.value === paneName"
                            ></i>
                        </span>
                    </el-radio-button>
                </el-badge>
            </template>
        </el-radio-group>
        <div class="infinite-list-wrapper">
            <ul v-infinite-scroll="load">
                <div class="scrollbar-content">
                    <template v-for="item in mailList">
                        <div
                            class="item"
                            :key="item.key"
                            :class="{active:item.claimId == claimId}"
                            @click="_ClaimById(item)"
                        >
                            <div
                                class="badge"
                                v-if="$options.filters.emailByIsRead(item.emailAddress,getEmailByIsRead)"
                            ></div>
                            <div class="content">
                                <ul>
                                    <li>
                                        <span>Order ID：</span>
                                        {{item.orderId}}
                                    </li>
                                    <li>
                                        <span>Model No：</span>
                                        {{item.productModel}}
                                    </li>
                                    <li>
                                        <span>Defective Product Details：</span>
                                        {{item.orderDetails}}
                                    </li>
                                </ul>
                            </div>
                            <el-select
                                v-model="item.status"
                                size="mini"
                                placeholder="请选择"
                                @focus="_selectClaimByIds(item)"
                                @change="_selectClaimById"
                                class="select"
                            >
                                <el-option
                                    v-for="item in selectClaim"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                    </template>
                </div>
            </ul>
            <p v-if="loading" class="scroll-footer">
                <i class="el-icon-loading"></i> 加载中...
            </p>
            <p v-if="noMore" class="scroll-footer">没有更多了</p>
        </div>
    </div>
</template>
<script>
const ERR_OK = 200;
export default {
    data() {
        return {
           count: 20,
            currentPage: 1,
            loading: false,
            noMore: false,
            paneName: 0,
            mailList: [],
            claimId: "",
            item: {},
            timer: "",
            getEmailByIsRead: [],
            orderId:"",
            selectClaim: [
                {
                    value: 0,
                    label: "待处理"
                },
                {
                    value: 1,
                    label: "处理中"
                },
                {
                    value: 2,
                    label: "已完成"
                }
            ],
            sort: "asc",
            etxra:0,
        };
    },
    created() {
         this.allMailList();
        this._getEmailByIsRead();
        this._setInterval();
    },
    filters: {
        emailByIsRead(email, val) {
            let b = "";
            for (let i in val) {
                if (val[i] === email) {
                    b = true;
                    break;
                } else {
                    b = false;
                }
            }
            return b;
        }
    },
    beforeDestroy() {
        //  清楚定时器
        clearInterval(this.timer);
    },
    methods: {
        onOrderId(val){
            this.mailList = []
            this.currentPage = 1;
            this.allMailList()
        },
        paneNameStatus() {
            this.noMore = false;
            this.mailList = [];
            this.currentPage = 1;
            this.allMailList();
        },
        clickCaret(id) {
            if (id === this.paneName) {
                this.sort = this.sort === "asc" ? "desc" : "asc";
                this.paneNameStatus();
            }
        },
        load() {
            if (!this.loading && !this.noMore) {
                this.allMailList();
            }
        },
        // 获取列表
        allMailList() {
            this.loading = true;
            this.etxra = 0
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.warrantyService +
                    "/warrantyClaim/findAllByPage",
                data: {
                    businessName: this.$route.name.substring(0,2),
                    currentPage: this.currentPage,
                    sort: this.sort,
                    pageSize: 20,
                    status: this.paneName,
                    orderId:this.orderId
                }
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.currentPage++;
                    this.mailList = this.mailList.concat(res.data.data);
                    if (this.mailList.length > 0) {
                        this.claimId = this.mailList[0].claimId;
                        this.$emit("selectedMails", this.mailList[0]);
                    }
                    this.etxra = res.data.etxra
                }
                if (res.data.data.length < 20) {
                    this.noMore = true;
                }
                this.loading = false;
            });
        },
        // 选择状态
        _selectClaimById(id) {
            this.item.status = id;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.warrantyService +
                    "/warrantyClaim/updateWarrantyClaim",
                data: this.item
            }).then(res => {
                this.allMailList();
            });
        },
        // 获取未读信息邮箱
        _getEmailByIsRead() {
            this.$ajax
                .get(
                    this.GLOBAL.warrantyService +
                        "/sendMail/getEmailByIsRead?isRead=false&businessName=" + this.$route.name.substring(0,2)
                )
                .then(res => {
                    this.getEmailByIsRead = res.data.data;
                });
        },
        // 定时收取未读邮件
        _setInterval() {
            this.timer = setInterval(() => {
                this._getEmailByIsRead();
            }, 6000);
        },
        // 点击阅读信息
        _setReadByEmail(email) {
            this.$ajax
                .get(
                    this.GLOBAL.warrantyService +
                        "/sendMail/setReadByEmail?emailAddress=" +
                        email +
                        "&businessName="  + this.$route.name.substring(0,2)
                )
                .then(res => {
                    if (res.data.code === 200) {
                        // clearInterval(this.timer);
                        // this._setInterval();
                    }
                });
        },
        // 获取列表ｉｄ
        _selectClaimByIds(item) {
            this.item = item;
        },
        // 列表点击
        _ClaimById(item) {
            this.claimId = item.claimId;
            this.$emit("selectedMails", item);
            this._setReadByEmail(item.emailAddress);
        }
    }
};
</script> 

<style lang="stylus" scoped>
.el-tabs--border-card {
    border-right: none;
}

.scroll-footer {
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
    color: #666;

    i {
        color: #409eff;
    }
}

.infinite-list-wrapper {
    overflow: auto;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    ul{
        margin 0;
        padding 0
    }
}

.scrollbar-content {
    .active {
        background: #eef2f6;
    }

    .badge {
        position: absolute;
        right: 10px;
        top: 10px;
        background: #dd6161;
        color: #ffffff;
        padding: 4px;
        font-size: 12px;
        border-radius: 10px;
    }

    .select {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 100px;
    }

    .content {
        padding-right: 20px;

        li {
            line-height: 24px;

            span {
                font-weight: bold;
            }
        }
    }

    .item {
        position: relative;
        padding: 10px 10px 45px 10px;
        border-bottom: 1px solid #DCDFE6;

        &:last-child {
            border-bottom: none;
        }
    }
}

::-webkit-scrollbar-track-piece { // 滚动条凹槽的颜色，还可以设置边框属性
    background-color: #f8f8f8;
}

::-webkit-scrollbar { // 滚动条的宽度
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb { // 滚动条的设置
    background-color: #dddddd;
    background-clip: padding-box;
    min-height: 28px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

.el-radio-group {
    display: flex;

    .el-radio-button {
        flex: 1;
    }
}

.caret-wrapper {
    position: absolute;
}
</style>


<style lang="stylus">
.warranty-left {
    .el-radio-button__inner {
        border: none !important;
        border-bottom: solid #DCDFE6 1px !important;
    }
}
.el-badge__content{
    z-index: 9;
}
</style>
